class MyTable {
  /**
   * new MyTable()
   * @param {Array} dataArr 数据数组
   * @param {HTMLElement} domRoot HTML根元素，动态表格往这里渲染
   * @param {Object} conf 配置对象
   */
  /* 
    const mt = new MyTable(
        students,
        document.querySelector(".mytable"),
        {
            pageSize:10,
            page:5
        }
    )
  */
  constructor(dataArr, domRoot, conf) {
    this.dataArr = dataArr;
    this.domRoot = domRoot;
    this.conf = conf;

    let { pageSize, page } = conf;
    this.turnToPage(page);
  }

  /* 实例方法中的this就是当前表格实例 */

  /* 渲染视图：给根元素刷一遍HTML */
  render() {
    // 让根元素有innerHTML
    this.domRoot.innerHTML = `
        <table border="1" cellspacing="0" id="mytable">
            <thead>
                <tr>${this.getThs()}</tr>
            </thead>
            <tbody>${this.getTrs()}</tbody>
        </table>`;
  }

  /* 生成表头ths */
  getThs() {
    const stu = this.dataArr[0];

    /* 将stu中的每个Key变成一个th并逐渐组装起来 */
    let ths = "";
    for (let key in stu) {
      ths += `<th>${key}</th>`;
    }
    return ths;
  }

  /* 生成表格行trs */
  getTrs() {
    let trs = "";
    // 遍历表格数据(this.dataArr)
    this.pageArr.forEach(
      // 为每个学生创建一个tr

      (stu) => {
        let tr = "<tr>";
        /* 为学生的每个属性生成一个td */
        for (let key in stu) {
          tr += `<td>${stu[key]}</td>`;
        }
        tr += "</tr>";

        // 并逐渐组装为一个大的html字符串
        trs += tr;
      }
      
    );
    // 返还给调用者在HTML模板中使用
    return trs;
  }

  /* 翻页方法 */
  turnToPage(n) {
    // 从数据数组中截取[n-1,n)这部分数据
    this.pageArr = this.dataArr.slice(
      this.conf.pageSize * (n - 1),
      this.conf.pageSize * n
    );
    
    // 重新渲染
    this.render();
  }

}